<template>
  <div class="box">
    <div class="top">
      <div id="main" ref="chartDom" style="width: 100%; height: 100%"></div>
    </div>
    <div class="bottom">
      <div class="left">
        <Orderdata></Orderdata>
      </div>
      <div class="right">
        <div id="main2" ref="chartDom2" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import Orderdata from "../../components/Orderdata.vue";
// 月退款数
const chartDom2 = ref(null);
let myChart2 = null;
const ydata3 = [15, 20, 22, 52, 40, 34, 28, 26, 46, 54, 12, 9];
// 月订单、支付数
const chartDom = ref(null);
let myChart = null;
const xdata = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
];
const ydata1 = [533, 200, 322, 432, 550, 454, 678, 876, 456, 374, 665, 789];
const ydata2 = [55, 190, 222, 402, 350, 44, 78, 626, 46, 54, 605, 79];
let option;
option = {
  title: {
    text: "月订单/支付数",
    top: "2%",
    left: "3%",
    textStyle: {
      fontSize: 20,
      color: "black",
    },
  },
  xAxis: {
    type: "category",
    data: xdata,
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLabel: {
      show: true,
      alignWithLabel: true,
      interval: 0,
    },
  },
  yAxis: {
    type: "value",
    
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.3)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    top:'3%',
    data: ["订单数", "支付数"],
  },
  series: [
    {
      name: "订单数",
      data: ydata1,
      type: "line",
      symbol: "none",
      smooth: true,
      radius: ["100%"],
      width: "100%",
      hight: "100%",
      itemStyle: {
        color: "#ff6a6c",
      },
      lineStyle: {
        color: "#ff6a6c",
        width:"3",
        shadowColor: "rgb(255,102,102)",
        shadowBlur: 15,
        shadowOffsetX: -20,
        shadowOffsetY: 20,
      },
    },
    {
      name: "支付数",
      data: ydata2,
      type: "line",
      symbol: "none",
      smooth: true,
      radius: ["100%"],
      width: "100%",
      hight: "100%",
      itemStyle: {
        color: "#6fb8ff",
      },
      lineStyle: {
        color: "#6fb8ff",
        width:"3",
        shadowColor: "#6fb8ff",
        shadowBlur: 15,
        shadowOffsetX: -20,
        shadowOffsetY: 20,
      },
    },
  ],
};

let option2;
option2 = {
  title: {
    text: "月退款数",
    top: "3%",
    left: "3%",
    textStyle: {
      fontSize: 20,
      color: "black",
    },
  },
  xAxis: {
    type: "category",
    data: xdata,
  },
  yAxis: {
    type: "value",
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.3)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    data: ["退款数"],
  },
  series: [
    {
      data: ydata3,
      type: "line",
      smooth: true,
      symbol: "none",
      radius: ["100%"],
      width: "100%",
      hight: "100%",
      itemStyle: {
        color: "#ff6a6c",
      },
      name: "退款数",
      lineStyle: {
        color: "#ff6a6c",
        width:"3",
        shadowColor: "rgb(255,102,102)",
        shadowBlur: 15,
        shadowOffsetX: -20,
        shadowOffsetY: 20,
      },
    },
  ],
};

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  myChart2 = echarts.init(chartDom2.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  myChart2.setOption(option2);
  // 让图例大小随窗口变化自适应
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  .top,
  .left,
  .right {
    background-color: white;
    border-radius: 20px;
  }
  .top {
    width: 100%;
    height: 500px;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    height: 500px;
    margin-top: 20px;
    .left {
      width: 25%;
    }
    .right {
      width: 74%;
    }
  }
}
</style>
